<template>
    <div>
        <div class="list-top">
            <p class="hint">提示：<br>点击图片可以查看详情；建议轮播图最多不超过6张；尺寸1920*640</p>
        </div>
        <div class="list-wrapper">
            <table class="list-table" border="0" cellspacing="0" cellpadding="0">
                <thead>
                <tr>
                    <th style="font-weight: 600;width: 15%">
                        <span class="icon add" @click="openAddForm"></span>
                    </th>
                    <th width="5%">序号</th>
                    <th width="15%">标题</th>
                    <th width="10%">公众号链接</th>
                    <th>描述</th>
                    <th>缩略图(点击查看原图)</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list" :key="item.id" @click="detail(item.id)">
                    <td>
                        <span class="icon del" @click="Del(item.id)"></span>
                    </td>
                    <td>{{index + 1}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.wx_src}}</td>
                    <td>{{item.describe}}</td>
                    <td><img height="100px" :src="item.url" @click="showPic(item.id)"/></td>
                </tr>
                </tbody>
            </table>
        </div>
        <transition name="fade">
            <div class="pop-wrapper" v-show="picShow">
                <div class="pop">
                    <div class="img" ref="img">
                        <img :src="url" @click="picShow = false"/>
                    </div>
                </div>
            </div>
        </transition>
        <div class="container">
            <el-dialog :visible.sync="popShow" size="tiny">
                <el-form labelWidth="150px">
                    <el-form-item label="标题：">
                        <el-col :span="15">
                            <el-input v-model="datas.title" size="small" placeholder="请输入"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="描述：">
                        <el-col :span="15">
                            <el-input v-model="datas.describe" size="small" placeholder="请输入"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="公众号链接：">
                        <el-col :span="15">
                            <el-input v-model="datas.wx_src" size="small" placeholder="请输入"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="电脑轮播图：">
                        <el-col :span="15">
                            <el-upload
                                class="avatar-uploader big-avatar-uploader"
                                :action="action"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess">
                                <img v-if="datas.img" :src="datas.img" class="avatar big-avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-col>
                        <span>建议尺寸1920*640</span>
                    </el-form-item>
                    <el-form-item label="微信轮播图：">
                        <el-col :span="15">
                            <el-upload
                                class="avatar-uploader small-avatar-uploader"
                                :action="action"
                                :show-file-list="false"
                                :on-success="handleUploadSuccess">
                                <img v-if="datas.wx_img" :src="datas.wx_img" class="avatar small-avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-col>
                        <span>建议尺寸375*180</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>



                    <!-- <el-upload
                            class="upload-demo myUpload"
                            :action="action"
                            :on-change="fileUploadChange"
                            :file-list="fileList"
                            :auto-upload="false"
                            :on-success="fileUploadSuccess"
                            :on-remove="fileRemove"
                            ref="upload"
                            :data="datas">
                        <el-button type="primary" slot="trigger" @click="fileList=[]" style="margin-left:5px;">
                            选择文件
                        </el-button>
                        <el-button type="success" @click="submitfiles" :disabled="subDisabled"
                                   style="margin-left:20px;">
                            上传图片
                        </el-button>
                    </el-upload> -->
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                list: {},
                action: PATH + 'system/slideShowImg',
                fileList: [],
                subDisabled: true,
                popShow: false,
                picShow: false,
                url: '',
                datas: {
                    title: '',
                    describe: '',
                    wx_src: '',
                    img: '',
                    wx_img: '' 
                }
            };
        },

        created() {
            this.getList();
        },

        methods: {
            Del(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        id: id
                    };
                    this.apiPost('Website/slideShowDel', data).then(res => {
                        let remind = res.error ? 'error' : 'success';
                        _g.toastMsg(remind, res.msg);
                        if (!res.error) {
                            this.getList();
                        }
                    })
                }).catch(() => {

                });
            },
            getList() {
                this.apiPost("Website/slideShowList").then(res => {
                    this.list = res;
                });
            },
            showPic(id) {
                let data = {id: id};
                this.apiPost('Website/slideShowDetail', data).then(res => {
                    this.picShow = true;
                    setTimeout(() => {
                        this.url = res;
                    });
                })
            },
            openAddForm() {
                this.popShow = true;
                this.datas = {
                    title: '',
                    describe: '',
                    wx_src: '',
                    img: '',
                    wx_img: ''
                }
            },
            handleAvatarSuccess(res){
                if(!res.error){
                    this.datas.img = res.msg
                }
            },
            handleUploadSuccess(res){
                if(!res.error){
                    this.datas.wx_img = res.msg
                }
            },
            onSubmit(){
                let data = this.datas
                this.apiPost('website/slideShow',data).then(res=>{
                    let remind = res.error ? 'error' : 'success';
                    _g.toastMsg(remind, res.msg);
                })
            }
            /* 图片上传 */
            // fileUploadChange(file, fileList) {
            //     if (fileList.length > 1) {
            //         _g.toastMsg('warning', '每次限上传一个文件')
            //     }
            //     this.subDisabled = fileList.length !== 1;
            // },
            // fileRemove(file, fileList) {
            //     this.subDisabled = fileList.length !== 1;
            // },
            // fileUploadSuccess(res) {
            //     _g.closeGlobalLoading();
            //     let remind = res.error ? 'error' : 'success';
            //     _g.toastMsg(remind, res.msg);
            //     if (!res.error) {
            //         this.fileList = [];
            //         this.getList();
            //         setTimeout(() => {
            //             this.subDisabled = true;
            //         }, 0);
            //     } else {
            //         this.fileList = [];
            //         setTimeout(() => {
            //             this.subDisabled = true;
            //             this.popShow = true;
            //         }, 0);
            //     }
            // },
            // submitfiles() {
            //     this.$refs.upload.submit();
            //     this.popShow = false;
            // },
        }
    };
</script>
<style lang="css" scoped>
    .fade-enter-active, .fade-leave-active {
        transition: .5s;

    }

    .fade-enter, .fade-leave-to {
        opacity: 0;
        transform: translateY(10px);
    }

    .container {
        box-sizing: border-box;
        width: 100%;
        background: #ffffff;
        min-height: 100%;
        font-size: 14px;
        overflow: hidden;
    }

    .list-top {
        background-color: #fff;
        padding: 5px;
    }

    .hint {
        font: 14px/24px arial;
        padding-left: 30px;
        color: red;
        letter-spacing: 1px;
    }

    .add {
        background: url(../../img/add.png) no-repeat;
        width: 24px;
        height: 24px;
    }

    .del {
        background: url(../../img/del.png) no-repeat;
    }

    .myUpload {
        text-align: center;
    }

    .pop-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .pop {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
    }

    .img img {
        width: 100%;
    }
    .big-avatar-uploader{
        width: 210px;
        height: 70px;
    }
    .big-avatar-uploader .avatar-uploader-icon{
        width: 210px;
        height: 70px;
        line-height: 70px;
    }
    .small-avatar-uploader{
        width: 185px;
        height: 90px;
    }
    .small-avatar-uploader .avatar-uploader-icon{
        width: 185px;
        height: 90px;
        line-height: 90px;
    }
</style>
